<script setup>
  import myHeader from './component/header.vue';
  import myMain from './component/main.vue'

  const userName = $ref('李四')

  const arr = $ref(['李四','王五','赵六'])

  function myFunParent(un,pwd){
    console.log('父组件中的方法myFunParent被调用')
    console.log(un)
    console.log(pwd)
  }

</script>

<template>
  <h4>如果一个页面内容太多 导致问题:1、复用性不够 2、太过于臃肿</h4>
  <h4>组件:可以将页面按照功能分开到不同的页面中 涉及到的知识点:1、传递参数 父组件向子组件传递参数 子组件向父组件传递参数</h4>
  <h4>如果是多个单词在一起的组件文件名 建议使用中杠线 - 隔开</h4>
  <my-header title="来自父组件的标题" user-name="张三"></my-header>
  <br/>
  <my-header title="来自父组件的标题" :user-name="userName"></my-header>
  <br/>

  <my-header title="来自父组件的标题" v-for="u in arr" :user-name="u"></my-header>

  <my-main @my-fun="myFunParent" @my-fun2="myFunParent"></my-main>

</template>
